<script setup>
    import { ref } from 'vue'
    import { ElMessage } from 'element-plus'

    const imgUrl = ref('')

    const handleAvatarSuccess = (response) => {
        console.log('onUploadFile 方法执行完毕了....')
        console.log(response);
        // 文件上传成功后的处理，通常是返回头像的 URL
        imgUrl.value =response;
    }
    const submitAvatar = () => {

        //提交数据
        const user = {
            username:"zs",
            age:"30",
            url:imgUrl.value
        }

        if (imgUrl.value) {
            ElMessage.success('头像修改成功'+ user.url + ",用户信息进行修改")
        } else {
            ElMessage.error('请先上传头像')
        }
    }
</script>

<template>
    <el-row class="avatar-uploader-container">
        <el-col :span="12" class="avatar-uploader-col">
            <el-upload
                    action="http://localhost:8080/upload/images"
                    class="avatar-uploader"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                <img v-else src="@/assets/logo.png" class="default-avatar" />
            </el-upload>
            <el-button
                    type="success"
                    size="large"
                    @click="submitAvatar"
                    class="upload-button">
                上传头像
            </el-button>
        </el-col>
    </el-row>
</template>
<style scoped>
    .avatar-uploader-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
    }

    .avatar-uploader-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .avatar-uploader {
        border: 2px solid #e4e7ed;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        background-color: #f3f4f6;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: border-color 0.3s ease;
    }

    .avatar-uploader:hover {
        border-color: #409eff;
    }

    .avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .default-avatar {
        width: 60%;
        height: 60%;
        object-fit: contain;
    }

    .upload-button {
        margin-top: 15px;
        background-color: #409eff;
        border-color: #409eff;
        color: white;
        border-radius: 20px;
        padding: 10px 30px;
        font-size: 16px;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .upload-button:hover {
        background-color: #66b1ff;
        border-color: #66b1ff;
    }

    .upload-button:focus {
        outline: none;
    }

    .upload-button i {
        margin-right: 8px;
    }
</style>